<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{height:height+'px'}">
			<!-- <view class="tui-header-top" :style="{paddingTop:top+'px'}"> -->
			<view class="tui-header-top" :style="{paddingTop:top + 10 +'px'}">
				{{tabletop}}
			</view>
			<view class="tui-header-top-icon" :style="{marginTop:top+'px'}">
				<tui-icon name="arrowleft" size="27" color="#000" @tap="back"></tui-icon>
			</view>
		</view>
		<!--header-->
		
		<!-- 社群主页 -->
			<view class="tui-header-banner">
				<view class="image_top">
					<image class="imagestop" :src="username['imageurl']"></image>
				</view>
				<view class="theleft">
					<view class="theleftname">
						<text style="float: left;">{{username['nickname']}}</text>
						<image v-if="username['jielong_status'] == 1" src="../../static/my/icon/Group2.png" class="tui-avatar-autonyms"></image>
					</view>
					<!-- <view class="theleftcount">成员数：{{username['fans_count']?username['fans_count']:'0'}} 接龙数：{{username['jielong_count'] != '0'?username['jielong_count']:'0'}}</view> -->
				</view>
			</view>
		<!-- 社群主页 -->
		
		<!-- 搜索 -->
		<view v-if="search_state == true" class="content_search_waikuang" style="top: 156rpx;">
			<view class="content_search">
				<image class="search_image" src="../../static/my/icon/search.png"></image>
				<input v-model="search_nickname" @blur="onSubmite_input()" placeholder="搜索活动名称"/>
			</view>
		</view>
		<view v-else class="content_search_waikuang" style="position: inherit;">
			<view class="content_search">
				<image class="search_image" src="../../static/my/icon/search.png"></image>
				<input v-model="search_nickname" @blur="onSubmite()" placeholder="搜索活动名称"/>
			</view>
		</view>
		<!-- 搜索 -->
		
		<!-- 接龙案例 -->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="case">
				<view class="case_box">
					<block v-for="(item,index) in rareData" :key="index">
						<view class="user_goods" @click="details('../dragon/details?id='+item.id+'&jielong_user_id='+item.jielong_user_id)">
							<view class="case_boxi_content" >
								{{item['details']['text']}}
							</view>
							<view class="Imagelist">
								<block v-for="(goods_images_item,goods_images_index) in item.details.images" :key="goods_images_index">
									<image class="Imagelists" :src="goods_images_item"></image>
								</block>
							</view>
							<view class="orderList" v-if="item.orderList">
								<block v-for="(orderList_item,orderList_index) in item.orderList" :key="orderList_index">
									<view class="orderList_list">
										<!-- <view class="orderList_list_num">{{item.buy_count - orderList_index}}</view> -->
										<view class="orderList_list_image">
											<image :src="orderList_item.imageurl"></image>
										</view>
										<view class="orderList_list_name">{{orderList_item.nickname}}</view>
										<view class="orderList_list_time">{{formatDatetime(orderList_item.create_time)}}</view>
										<view class="orderList_list_count">已团{{orderList_item.goods_count}}件</view>
									</view>
								</block>
							</view>
							<view class="case_box_des" style="padding-bottom: 0rpx !important;">
								<view class="title_goods">{{item.title}}</view>
							</view>
							<view class="case_box_des" >
								<view style="color: #1193e3!important;font-size: 20rpx;">
									 ¥ <text style="font-size: 32rpx;">{{tag_text(item.min_price,item.max_price)}}</text>
								</view>
								<view class="case_box_time">
									<text class="case_box_time_text" :class="statusList[item.status].color">{{statusList[item.status].title}}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 接龙案例 -->
		
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		
		<!-- 接龙案例 -->
		<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		<view class="tui-safearea-bottom"></view>
		<!-- 接龙案例 -->
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>
<script>
	const dataTime = require('../../utils/util.js');

	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiCard from "@/components/card/card"
	import tuiToast from "@/components/extend/toast/toast"
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiListView,
			tuiListCell,
			tuiCard,
			tuiToast
		},
		props: {
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				userInfo: '',
				current: 0,
				banner: [
					"1.png",
					"2.png",
				],
				userCount: 0,
				statusList: [],
				rareData: [],
				page: 1,
				loadding: false,
				pullUpOn: true,
				empty: 1,
				scrollTop: 0,
				orderInfo: {
					orderTotal:{2:0,3:0},	
					account:{balance:0},
				},
				uid: '',
				username: [],
				user_id: '',
				height: 0,
				top: 0,
				tabletop: '社群主页',
				search_nickname: '',
				search_state: false,
			}
		},
		onLoad:function(option){
			console.log(option);
			this.uid = option.uid;
			console.log(this.uid);
			if(option.display_status == 0){
				this.display_status = option.display_status;
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.user_id = option.user_id;
			// if(this.userInfo){
				this.loadData(this.uid);
				this.username_index();
				// this.getAccount();
			// }else{
			// 	this.empty = 0
			// 	this.loadding = false
			// 	this.pullUpOn = false
			// }
			
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						// this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						// this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6) ;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					}
				})
			}, 50);
		},
		onShow: function() {
			// this.userInfo = uni.getStorageSync('userInfo');
			// if(this.userInfo){
			// 	// this.loadData();
			// 	// this.getAccount();
			// }else{
			// 	this.empty = 0
			// 	this.loadding = false
			// 	this.pullUpOn = false
			// }
			// console.log(this.rareData);
		},
		methods: {
			tag_text: function(min_price,max_price){
				if(min_price == max_price){
					var price = ' ' + this.tui.centsToYuan(min_price);
				}else{
					var price = ' ' + this.tui.centsToYuan(min_price) + ' ~' + ' ' +this.tui.centsToYuan(max_price);
				}
				return price;
			},
			// input 输入结束事件
			onSubmite_input: function(){
				this.rareData = [];
				this.page = 1;
				this.loadData();
			},
			onSubmite: function(){
				this.rareData = [];
				this.page = 1;
				this.loadData();
			},
			onShareAppMessage: function(res) {
				return {
				  title: this.tabletop,
				}
			},
			back: function(){
				uni.reLaunch({
					url: '../index/index'
				});
				// uni.navigateBack();
			},
			username_index: function(){
				let that = this;
				that.tui.request('user/userInfo',{user_id:this.uid}).then((res) => {
					if(res.code == '0000'){
						console.log('aaaaaaaaaaaaaaaaaaa',res)
						that.username = res
						that.tabletop = that.username.nickname + '的小接龙';
					}else{
						let params = {
							title: "未查询到",
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			toAmount: function(amount){
				let fee = this.tui.centsToYuan(amount);
				return fee.toFixed(2);
			},
			loadData: function(){
				console.log(this.uid);
				this.loadding = true
				var array = [];
				array = {user_id:this.uid,page_size: 10 ,page:this.page,jielong_user_id:this.uid,type:1,keyword:this.search_nickname};
				
				this.tui.request('jielong/list',array).then((res) => {
					console.log(res)
					if(res.code == "0000"){
						if(res.data.list.length > 0){
							this.loadding = false
							this.pullUpOn = true
							this.empty = 1
							this.page++
							this.userCount = res.userCount
							this.statusList = res.statusList
							for( let i = 0; i < res.data.list.length; i++ ){
								res.data.list[i]['details'] = JSON.parse(res.data.list[i]['details']);
								res.data.list[i]['jielong_user_id'] = this.uid;
								this.rareData.push(res.data.list[i])
							}
							// this.rareData = res.data.list
						}else{
							this.loadding = false
							this.pullUpOn = false
						}
						if(res.data.list.length == 0 &&  this.page == 1){1
							this.empty = 0
						
						}
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			formatDate: function (timestamp) {
				return {text: dataTime.getDateDiff(timestamp)}
				// return {text: dataTime.formatDate('m-d',timestamp)}
			},
			formatDatetime: function (timestamp) {
				// return {text: dataTime.getDateDiff(timestamp)}
				var timestamp = dataTime.getDateDiff(timestamp);
				return timestamp;
			},
			price: function(amount){
				return {text: '￥' + this.tui.centsToYuan(amount).toFixed(2),color:'#f7374f', size:'32'}
			},
			nickname: function(nickname){
				return {text: nickname};
			},
			imageurl: function(image){
				return {url: image};
			},
			change: function(e) {
				this.current = e.detail.current
			},
			details: function(url,type) {
				if(!url){
					return false
				}				
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				if(url == 'special'){
					getApp().globalData.currentTab = '1';
					uni.navigateTo({
					    url:'../dragon/myorder',
					});
				}else{
					uni.navigateTo({
					   url: url,
					});
				}
			},
			wxGetUserInfo: function() {
				let that = this;
				that.tui.wxLogin().then((res)=>{
					if(res.code == '0000'){
						that.userInfo = res;
						that.getAccount();
						this.loadData();
					}
				});
			},
			change: function(e) {
				this.currentTab = e.index
				if(!this.userInfo){
					return false
				}
				this.page = 1
				this.loadding = false
				this.pullUpOn = true
				this.rareData = []
				this.loadData();
			},
		},
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom: function() {
			if(this.pullUpOn == true){
				this.loadData();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
			if(e.scrollTop > 100){
				this.search_state = true;
			}else{
				this.search_state = false;
			}
		},
		disMove:function(){
		 
		},
	}
</script>

<style lang="scss">
	@import '../../static/style/thorui.css';
	
	.user_goods{
		width: 47%;
		background: #fff;
		float: left;
		margin: 10rpx;
		border-radius: 10rpx;
	}
	
	.title_goods{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		height: 60rpx;
		font-size: 24rpx;
	}
	
	.font-Tag{
		font-weight: 550 !important;
		margin-bottom: 50rpx !important;
	}
	.container {
		/* padding-bottom: 100rpx; */
		color: #333;
		padding-bottom: env(safe-area-inset-bottom);

	}
	.tui-center{
		text-align: center;
	}
	/* 接龙案例 */
	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 20upx 20upx;
		// margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		// height: 200rpx;
	}
	.case_box_time{
		/* padding-left: 5rpx; */
	}
	.case_box_time_text{
		color: #b1b1b1;
		padding-left: 10rpx;
	}
	.case_box_right{
		color: #1193E3;
		font-weight: 500;
		
	}
	.case{
		/* background: #FFFFFF; */
		padding: 0 10rpx 0 10rpx;
	}
	.case_title{
		font-size: 35rpx;
		font-weight: 700;
		padding-top: 20rpx;
	}
	.case_describe{
		font-size: 28rpx;
		color: #a6a6a6;
		padding-top: 10rpx;
		line-height: 60rpx;
	}
	.case_box{
		padding: 0px 0px 40px 0px;
	}
	.tui-header-right{
		font-weight: 550;
	}
	.tui-header-title{
		font-size: 30rpx !important;
		font-weight: 500;
		margin-top: 0rpx !important;
		color: #000000 !important;
		max-width: 625rpx !important;
		// min-width: 460rpx !important;
	}
	.tui-header-title-time{
		margin-top: 0rpx !important;
		color: #999 !important;
	}
	.tui-header-left view{
		line-height: 50rpx;
		// letter-spacing: 4rpx;
	}
	.tui-title {
		width: 100%;
		padding: 70upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		line-height: 30upx;
		color: #666;
	}
	.case_box_title{
		padding-left: 20rpx !important;
		// margin: 25rpx auto !important;
		font-weight: 550;
		// padding-bottom: 18rpx;
		// letter-spacing: 4rpx;
		font-size: 35rpx !important;
	}
	.case_boxi_content {
		padding: 0upx 30upx;
		color: #9e9e9e;
		font-size: 28rpx;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
/* 	.case_boxi_footer{
		padding: 30upx 20upx;
		color: #f40e2a;
		font-size: 35rpx;
		font-weight: 500;
	} */
	.tui-card{
		margin: 0rpx !important;
		margin-top: 20rpx !important;
		box-shadow: 0 0 3rpx #eee !important;
		border: 1rpx solid #f5f5f5 !important;
	}
	.tui-header-thumb{
		border-radius: 10% !important;
		width: 90rpx !important;
		height: 90rpx !important;
	}
	/* 接龙案例 */
	
	
	/* header */
	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		background: #0bc99d;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 999;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}
	.tui-header-banner {
		/* padding-top: 60rpx; */
		box-sizing: border-box;
		background: #FFF;
		padding-top: 185rpx;
		margin-bottom: 10rpx;
		// line-height: 160rpx !important;
		height: 330rpx !important;
	}
	.image_top{
		float: left;
		margin-left: 40rpx;
		height: 140rpx;
	}
	.image_top image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 10%;
		margin-top: 20rpx;
	}
	.theleftname{
		font-weight: 500;
		font-size: 35rpx;
		text-align: left;
		height: 50rpx;
	}
	.theleftcount{
		color: #999;
		font-size: 28rpx;
	}
	.theleft{
		height: 100rpx;
		float: left;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.theleft view{
		line-height: 50rpx;
	}
	.tui-banner-bg {
		display: flex;
		height: 330rpx;
		background: #FFF;
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 200rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background: #0c83cc;
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}
	
	.tui-banner-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		/* bottom: -80rpx; */
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 270rpx;
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
		box-shadow: 0px 5px 5px rgba(0,0,0,0.3);
	}

	.tui-slide-image {
		width: 100%;
		height: 270rpx;
		display: block;
	}

	/* #ifdef APP-PLUS || MP */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}
	/* #endif */
	/* header */

	/* category */

	.tui-product-category {
		padding: 30rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
		/* margin-bottom: 20rpx; */
		margin: 0px auto;
		width: 100%;
	}

	.tui-category-item {
		width: 25%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 50rpx;
	}

	.tui-category-img {
		height: 100rpx;
		width: 100rpx;
		display: block;
	}

	.tui-category-name {
		line-height: 0rpx;
		// font-weight: 500;
		color: #000;
		font-size: 28rpx !important;
	}
	.tui-category-width{
		margin: 0px auto;
		background: #FFFFFF;
		width: 100%;
		/* margin-top: 30rpx; */
		// letter-spacing: 3rpx;
		/* font-weight: 500; */
	}
	/* category */
	
	/* tui-list-cell */
	.tui-list-cell{
		width: 90% !important;
		margin: 0px auto;
		border-radius: 80rpx;
		background: #1193E3 !important;
	}
	.tui-dragon-pic{
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-right: 24rpx;
	}
	.tui-right-pic{
		width: 152rpx;
		height: 29rpx;
		display: block;
	}

	.tui-list-view {
		/* padding-top: 10upx !important; */
		background: #FFFFFF;
		margin: 20rpx auto;
		padding: 30rpx 0px;
		width: 100%;
	}
	.tui-list-content::after{
		border-bottom: 1rpx solid #FFFFFF;
	}
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
		margin: 0 auto !important;
	}
	.tui-msg-item {
		/* max-width: 500upx;
		min-height: 80upx; */
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 35upx;
		line-height: 1;
		color: #FFF;
		font-weight: 500;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #7a5f37;
	}

	.tui-msg-right {
		max-width: 160upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		font-size: 30rpx;
		color: #7a5f37 !important;
	}
	
	.tui-msg::after {
		left: 154upx !important
	}

	.tui-badge-dot{
		background: #0A8FE2 !important;
	}
	/* tui-list-cell */
	
	.text-green {
		color: #1193E3 !important;
	}
	.tui-gray{
		background: #CCCCCC !important;
	}
	.people{
		width: 39rpx;
		height: 30rpx;
		display: inline-block;
	}
	.eye{
		width: 45rpx;
		height: 26rpx;
		display: inline-block;
	}
/* 	.particulars .tui-cell-class{
		padding-top: 0rpx !important;
	}
	.description .tui-cell-class {
		padding-bottom: 10px !important;
	} */
	.buttonke{
		height: 100% !important;
		width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
		line-height: 44rpx !important;
		background-color: #FFF !important;
		border: 0 rpx solid #000 !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		font-size: inherit !important;
		overflow: visible !important;
		// font-weight: 400;
	}
	.tui-msg{
		position: fixed;
		left: 20%;
		top: 90%;
		z-index: 99999 !important;
		width: 60% !important;
		height: 125rpx !important;
	}
	.tui-msg .tui-cell-class{
		box-shadow: 5rpx 10rpx 30rpx 2rpx rgba(105,105,105,0.5);
	}
	.tui-mybg-box {
		width: 100%;
		height: 335rpx;
		position: relative;
	}
	
	.tui-my-bg {
		width: 100%;
		height: 320rpx;
		display: block;
		background-image: url('../../static/my/icon/Group203x.png');
		background-size:100% 100%;
		box-shadow: 5rpx 5rpx 30rpx 2rpx rgba(105,105,105,0.5);
	}
	
	.tui-header-center {
		position: absolute;
		width: 100%;
		height: 120rpx;
		left: 0;
		top: 10rpx;
		padding: 0 70rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-avatar {
		flex-shrink: 0;
		width: 60rpx;
		height: 60rpx;
		display: block;
		border-radius: 50%;
		margin: 0rpx;
		padding: 0rpx;
		background: #dddddd;
	}
	.tui-avatar-refresh{
		width: 20rpx;
		height: 20rpx;
	}
	.tui-avatar-pic {
		width: 60% !important;
		height: 60% !important;
		display: block;
		margin: 10px auto;
	
	}
	.cs_button{
		width: 100%;
		text-align: left;
		padding: 0px !important;
		
	}
	.tui-info {
		width: 50%;
		padding-left: 30rpx;
	
	}
	
	.tui-nickname {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		/* display: flex; */
		align-items: center;
		// letter-spacing: 3rpx;
	}
	
	.tui-img-vip {
		width: 56rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}
	
	.tui-explain {
		width: 60%;
		font-size: 22rpx;
		font-weight: 550;
		color: #fff;
		opacity: 0.75;
		white-space: nowrap;
	/* 	overflow: hidden;
		text-overflow: ellipsis; */
		border: 4rpx solid #FFFFFF;
		border-radius: 30rpx;
		margin: 15rpx 0;
		text-align: center;
		/* padding-left: 30rpx 15rpx 30rpx 15rpx; */
		height: 40rpx;
		line-height: 40rpx;
		/* padding: 5rpx 0; */
	}
	.tuanyuan{
		height: 35rpx !important;
		width: 41rpx !important;
		margin-left: 20rpx !important;
		float: left;
		margin-top: 7rpx;
	}
	.started{
		font-weight: 550;
		width: 240rpx;
		background: #FFF;
		color: #1193E3;
		text-align: center;
		height: 73rpx;
		border-radius: 10rpx;
		line-height: 73rpx;
		margin-left: 110rpx;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.money{
		font-weight: 550 !important;
		font-size: 55rpx !important;
	}
	.moneytx{
		font-size: 30rpx !important;
		font-weight: 500 !important;
	}
	.case .tui-card-header::after{
		border-bottom: 0rpx solid #000 !important;
		padding: 30rpx !important;
	}
	.share-pro{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 999999 !important;
		line-height: 1;
		box-sizing: border-box;
		.share-pro-mask-share{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0);
		}
		.share-pro-mask{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
		.share-pro-dialog-goods {
			width: 750rpx;
			height: 600rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
		
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
			
			}
		}
		
		.share-pro-dialog {
			width: 750rpx;
			height: 76%;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
	
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
				padding-bottom: 30rpx;
				.share-item{
					display: flex;
					flex-direction:column;
					justify-content: center;
					justify-content:space-around;
					.share-pro-title-text{
						font-size: 30rpx;
					}
					.share-pro-title-text-des{
						font-size: 28rpx;
						color: #CCCCCC;
						padding-top: 15rpx;
					}
					.share-icon{
						text-align:center;
						width: 100rpx;
						height: 100rpx;
						color: #42ae3c;
						margin: 0px auto;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
					}
					&:nth-child(2){
						.share-icon{
							color: #ff5f33;
						}
					}
				}
			}
		}
	
		/* 显示或关闭内容时动画 */
	
		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}
		.closeCart {
			transition: all 0.3s ease-out;
			transform: translateY(600rpx);
		}
		.close {
			transition: all 0.3s ease-out;
			transform: translateY(100%);
		}
	
	}

	.topdingdan{
		background-color: #FFF !important;
		border-bottom: 1rpx solid #E8E8E8;
	}
	.numbers{
		color: #000 !important;
		font-weight: 500;
		font-size: 33rpx !important;
		// letter-spacing: 3rpx !important;
	}
	.tui-avatar-autonym{
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin-left: 8rpx;
		float: right;
		margin-bottom: 6rpx;
	}
	.tui-avatar-autonyms{
		width: 108rpx;
		height: 36rpx;
		display: block;
		margin-left: 8rpx;
		float: left;
		margin-top: 8rpx;
	}
	.shareCancelBut{
		color: #999;
		text-align: center;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.teammembers{
		display:inline !important;
	}
	.teammembers .tui-card{
		border: 0rpx solid #000 !important;
		width: 700rpx;
		margin-top: 0rpx !important;
	}
	.teammembers .tui-header-left view{
		line-height: 80rpx !important;
	}
	.teammembers .tui-card-header::after{
		margin-bottom: 0rpx solid #000;
	}
	.unfriended{
		float: right;
	}
	.periphery{
		height: 100rpx !important;
		// line-height: 140rpx !important;
		padding: 20rpx 30rpx !important;
	}
	.periphery image{
		height: 100rpx;
		width: 100rpx;
		border-radius: 10%;
		float: left;
	}
	.designation{
		// float: left;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 25rpx;
		font-size: 35rpx;
		font-weight: 550;
	}
	.membernum{
		// float: left;
		height: 50rpx;
		margin-left: 25rpx;
		line-height: 50rpx;
		color: #999999;
	}
	.case_box_left{
		float: right;
		height: 100rpx;
		line-height: 100rpx;
		color: #CCCCCC;
	}
	.baozhu{
		float: left;
		width: 450rpx;
		height: 100rpx;
	}
	.Imagelist{
		height: 330rpx;
		width: 100%;
		// padding: 20rpx 20rpx;
		// border-bottom: 1rpx dashed #CCC;
		// margin-bottom: 40rpx;
		// margin-top: 40rpx;
		// margin: 25rpx 20rpx 25rpx 20rpx;
		// padding-bottom: 40rpx;
	}
	.Imagelists{
		height: 100%;
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		// margin-left: 3.5%;
	}
	.orderList{
		padding: 0 30rpx;
	}
	.orderList_list{
		// display: flex;
		height: 40rpx;
		margin-bottom: 20rpx;
		line-height: 40rpx;
	}
	.orderList_list_num{
		width: 50rpx;
		color: #999999;
		font-size: 30rpx;
		float: left;
	}
	.orderList_list_image{
		margin-left: 10rpx;
		float: left;
	}
	.orderList_list_image image{
		width: 40rpx !important;
		height: 40rpx !important;
	}
	.orderList_list_name{
		margin-left: 35rpx;
		color: #000000;
		// font-weight: 500;
		float: left;
		font-size: 30rpx;
		max-width: 200rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.orderList_list_time{
		margin-left: 20rpx;
		color: #999;
		float: left;
		font-size: 30rpx;
	}
	.orderList_list_count{
		float: right !important;
		// font-weight: 500;
		font-size: 30rpx;
	}
	.tui-header-title{
		font-size: 37rpx !important;
		font-weight: 550 !important;
		margin-top: 0rpx !important;
		color: #000000 !important;
	}
	.tui-card-header{
		// line-height: 90rpx !important;
		padding: 20rpx 30rpx 0rpx 30rpx !important;
	}
	
	
	/* header */
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
		background: #FFFFFF;
	}
	
	.tui-modal-content {
		color: #000000 !important;
	}
	
	.tui-header-top {
		width: 100%;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 500;
		height: 30rpx;
		display: flex;
		font-weight: 550;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-top-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}
	
	.tui-modal-title {
		font-size: 32rpx !important;
	}
	
	.tui-red-outline,
	.tui-red {
		background: none !important;
		color: #0A8FE2 !important;
		font-size: 33rpx !important;
	}
	
	.tui-red-outline::after {
		border: none !important;
	}
	
	.tui-modal-content {}
	
	/* header */
	
	/* 搜索 */
	.content_search_waikuang{
		position: fixed;
		// top: 178rpx;
		z-index: 999;
		height: 120rpx;
		width: 100%;
		background-color: #FFF;
	}
	
	.content_search{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 90%;
		background-color: #F3F3F3;
		margin: 0 auto;
		border-radius: 5rpx;
		margin-top: 20rpx;
	}
	
	.content_search input{
		height: 80rpx;
		line-height: 80rpx;
		width: 60%;
		text-align: left;
		padding-left: 10rpx;
		background: #F3F3F3;
		/* margin-top: 10rpx;
		margin: 0 auto; */
	}
	
	.search_image{
		width: 20px;
		height: 40rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	/* 搜索 */
</style>